<style scoped>
.Content {
  background-size: cover;
}
.header {
  height: 60px;
}
#logo {
  position: absolute;
  width: 129px;
  height: 40px;
  z-index: 1;
  margin-top: 5px;
  margin-left: 2.5%;
}
.InputStyle {
  width: 400px;
}
.registerForm {
  padding: 20px;
}
.register_title {
  background-color: rgb(34, 167, 240);
  text-align: center;
  vertical-align: middle;
  line-height: 60px;
  color: white;
  font-size: 30px;
  font-weight: bold;
}
.demo-upload-list {
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-right: 4px;
}
.demo-upload-list img {
  width: 100%;
  height: 100%;
}
.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
}
.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}
.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}
.uploadAvatar {
  position: relative;
  width: 58px;
  height: 58px;
  top: 0;
  left: 0;
  outline: none;
  background-color: transparent;
  opacity: 0;
}
.uploadBox {
  display: inline-block;
  width: 58px;
  height: 58px;
  line-height: 58px;
  overflow: hidden;
  border-width: 0.75px;
  border-style: dashed;
  border-color: lightslategray;
}
.formStyle {
  display: flex;
  justify-content: center;
}
.organization >>> .ti-input {
  display: inline-block;
  width: 400px;
  height: 32px;
  line-height: 1.5;
  padding: 4px 7px;
  font-size: 12px;
  border: 1px solid #dcdee2;
  border-radius: 4px;
  color: #515a6e;
  background-color: #fff;
  background-image: none;
  position: relative;
  cursor: text;
}
.organization >>> input {
  opacity: 0.5;
}
</style>
<template>
  <div>
    <Layout>
      <!-- <Header class="header">
        <img src="@/assets/images/OGMS.png" id="logo" @click="goHome" style="cursor:pointer">
      </Header>-->
      <Content>
        <Row class="Content" id="register">
          <Col :xs="{ span: 12, offset: 6 }" :lg="{ span: 12, offset: 6 }">
            <div class="registerForm">
              <Card>
                <h2 slot="title" class="register_title">学员注册</h2>
                <!-- 实现注册的样式 -->
                <Form
                  ref="registerForm"
                  :model="registerForm"
                  :rules="registerFormValidate"
                  :label-width="150"
                  label-position="right"
                  inline
                >
                  <!-- <div class="formStyle">
                    <FormItem label="Email" prop="email">
                      <Input
                        v-model="registerForm.email"
                        placeholder="Plase enter your email"
                        :class="{ InputStyle: inputstyle }"
                      ></Input>
                    </FormItem>
                  </div> -->
                  <div class="formStyle">
                    <FormItem label="学号" prop="userId">
                      <Input
                        v-model="registerForm.userId"
                        placeholder="请输入学号"
                        :class="{ InputStyle: inputstyle }"
                      ></Input>
                    </FormItem>
                  </div>
                  <div class="formStyle">
                    <FormItem label="姓名" prop="name">
                      <Input
                        v-model="registerForm.name"
                        placeholder="请输入姓名"
                        :class="{ InputStyle: inputstyle }"
                      ></Input>
                    </FormItem>
                  </div>
                  <div class="formStyle">
                    <FormItem label="专业" prop="major">
                      <Input
                        v-model="registerForm.major"
                        placeholder="请输入专业"
                        :class="{ InputStyle: inputstyle }"
                      ></Input>
                    </FormItem>
                  </div>
                  <div class="formStyle">
                    <FormItem label="密码" prop="password">
                      <Input
                        v-model="registerForm.password"
                        placeholder="请输入密码"
                        :class="{ InputStyle: inputstyle }"
                        :type="pwdType"
                      >
                        <Button slot="append" @click="changeType()">
                          <Icon type="ios-eye" size="20" v-show="pwdType == 'text'" />
                          <Icon
                            type="ios-eye-off"
                            size="20"
                            v-show="pwdType == 'password'"
                          />
                        </Button>
                      </Input>
                    </FormItem>
                  </div>
                  <div class="formStyle">
                    <FormItem label="确认密码" prop="confimPassword">
                      <Input
                        v-model="registerForm.confimPassword"
                        placeholder="请再次输入密码"
                        :class="{ InputStyle: inputstyle }"
                        :type="pwdType"
                      ></Input>
                    </FormItem>
                  </div>
                  <div class="formStyle">
                    <Button @click="handleReset('registerForm')" style="float: left"
                      >重置</Button
                    >
                    <Button
                      type="primary"
                      @click="handleSubmit('registerForm')"
                      style="margin-left: 50%"
                      >注册</Button
                    >
                  </div>
                </Form>
                <!-- 注册样式结束 -->
              </Card>
            </div>
          </Col>
        </Row>
      </Content>
    </Layout>
  </div>
</template>
<script>
import md5 from "js-md5";
import VueTagsInput from "@johmun/vue-tags-input";
export default {
  components: { md5, VueTagsInput },
  computed: {
    avatar() {
      return this.$store.getters.avatar;
    },
  },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.registerForm.password) {
        callback(new Error("确认密码与密码输入不一致"));
      } else {
        callback();
      }
    };
    return {
      //input的样式设定
      inputstyle: true,
      //表单验证
      registerForm: {
        userId: "",
        name: "",
        major: "",
        password: "",
        confimPassword: "",
      },
      registerFormValidate: {
        userId: [
          {
            required: true,
            message: "学号不能为空",
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: "姓名不能为空",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            min: 6,
            message: "密码必须大于6个字符",
            trigger: "blur",
          },
        ],
        confimPassword: [
          {
            required: true,
            validator: validatePass,
            trigger: "blur",
          },
        ],
      },
      visible: false,
      // 隐藏密码图标样式
      pwdType: "password", // 密码类型
    };
  },
  methods: {
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          var userData = {
            name: this.registerForm.name,
            userId: this.registerForm.userId,
            major: this.registerForm.major,
            password: md5(this.registerForm.password),
          };

          this.axios
            .post("/visualResourceLibrary/user", userData)
            .then((res) => {
              if (res.data.code == -3) {
                this.$Message.error("该学号已被注册!");
                this.registerForm.email = "";
              } else if (res.data.code == 0) {
                this.$Message.success("注册成功");
                this.$router.replace({ name: "Login" });
              }
            })
            .catch((err) => {
              throw err;
            });
        }
      });
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    },
    uploadPhoto(e) {
      // 利用fileReader对象获取file
      var file = e.target.files[0];
      var filesize = file.size;
      var filename = file.name;
      var imgcode = "";
      // 2,621,440   2M
      if (filesize > 2101440) {
        // 图片大于2MB
        this.$Message.error("size > 2MB");
      }
      var reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = (e) => {
        //正巧后台也是使用的base64 hah
        // 读取到的图片base64 数据编码 将此编码字符串传给后台即可,
        imgcode = e.target.result;

        this.$store.commit("uploadAvatar", imgcode);
        $("#avatarInput").val("");
      };
    },
    handleView() {
      this.visible = true;
    },
    handleRemove() {
      this.$store.commit("uploadAvatar", "");
    },
    //点击图标片跳转到主页
    goHome() {
      this.$router.push({ name: "home" });
    },
    //输入密码时
    changeType() {
      this.pwdType = this.pwdType === "password" ? "text" : "password";
      // this.eyeIconType = 'ios-eye-on';
    },
    encrypto(context) {
      // var CryptoJS = require("crypto-js");
      // var key = CryptoJS.enc.Utf8.parse("NjnuOgmsNjnuOgms");
      // var iv = CryptoJS.enc.Utf8.parse("NjnuOgmsNjnuOgms");
      // var encrypted = "";
      // if (typeof context == "string") {
      // } else if (typeof context == "object") {
      //   context = JSON.stringify(context);
      // }
      // var srcs = CryptoJS.enc.Utf8.parse(context);
      // encrypted = CryptoJS.AES.encrypt(srcs, key, {
      //   iv: iv,
      //   mode: CryptoJS.mode.CBC,
      //   padding: CryptoJS.pad.Pkcs7
      // });
      // return encrypted.toString();
    },
  },
};
</script>
